<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>
<template>
    <view class="login_content">
        <view class="login_content_box">
            <view class="login_content_box_title">密码登录</view>
            <view class="input_box">
                <view class="input_box_title">+86</view>
                <view class="input_box_line"></view>
                <uv-input placeholder="请输入手机号码" border="none" v-model="form.phone" @blur="phoneBlur"
                    :customStyle="customStyle" maxlength="11"></uv-input>
            </view>
            <view class="input_box">
                <view class="input_box_title">密码</view>
                <view class="input_box_line"></view>
                <uv-input placeholder="请输入密码" :password="true" border="none" v-model="form.password"
                    :customStyle="customStyle" v-if="passwordFlag">
                    <template v-slot:suffix>
                        <uv-icon @click="passwordFlag = !passwordFlag"
                            :name="passwordFlag ? 'https://private-domin-1327252780.cos.ap-chengdu.myqcloud.com/app_resource/static/login/eye-off.png' : 'https://private-domin-1327252780.cos.ap-chengdu.myqcloud.com/app_resource/static/login/eye.png'"
                            size="20"></uv-icon>
                    </template>
                </uv-input>
                <uv-input placeholder="请输入密码" border="none" v-model="form.password" :customStyle="customStyle" v-else>
                    <template v-slot:suffix>
                        <uv-icon @click="passwordFlag = !passwordFlag"
                            :name="passwordFlag ? 'https://private-domin-1327252780.cos.ap-chengdu.myqcloud.com/app_resource/static/login/eye-off.png' : 'https://private-domin-1327252780.cos.ap-chengdu.myqcloud.com/app_resource/static/login/eye.png'"
                            size="20"></uv-icon>
                    </template>
                </uv-input>
            </view>
            <view class="login_content_to_agreement">
                <uv-checkbox-group v-model="agreementValue">
                    <uv-checkbox activeColor="#FF7D1C" name="agreement" shape="circle"></uv-checkbox>
                </uv-checkbox-group>
                <view class="login_content_to_agreement_text">
                    我已阅读并同意慧赚生活<text class="login_content_to_agreement_text_color"
                        @click="toAgreement('yh')">《用户协议》</text>和<text class="login_content_to_agreement_text_color"
                        @click="toAgreement('ys')">《隐私政策》</text>
                </view>
            </view>
            <view class="login_content_button">
                <uv-button color="#fff" shape="circle" text="登录" :customStyle="buttonCustomStyle"
                    :disabled="form.phone == '' || form.password == '' || !agreementValue.length"
                    @click="toIndex"></uv-button>
                <!-- <view class="login_content_to_password">
                    <view style="flex: 1;" @click="toLogin">免密登录</view>
                    <view style="flex: 1;" @click="toForget">忘记密码？</view>
                </view> -->
            </view>
            <view class="passwordLogin" @click="passWordClick">验证码登录</view>
        </view>
    </view>

</template>
<script setup lang="ts">
import { getUserInfoApi, loginApi } from '@/service/app/user'; // 看这里
import { useAccessStore } from '@/store/access';
import { useUserStore } from '@/store/user';
import { ref } from 'vue';
const accessStore = useAccessStore()
const userStore = useUserStore()

// 响应式数据
const form = reactive({
    phone: '',
    password: '',
    device_type: 3,
    equipment_id: ''
})

const customStyle = reactive({
    width: '100%',
    padding: '0',
})

const buttonCustomStyle = reactive({
    width: '100%',
    height: '92rpx',
    fontFamily: 'PingFang SC, PingFang SC',
    fontSize: '32rpx',
    fontWeight: 500,
    background: '#FF7D1C',
    borderRadius: '200rpx'
})

const agreementValue = ref([])
const passwordFlag = ref(true)

// 协议
const toAgreement = (v) => {
    uni.navigateTo({
        url: '/pages-sub/agreement/index?type=' + v
    })
}

const toIndex = async () => {
    const res = await loginApi({
        data: form
    })
    accessStore.setAccessToken(res.data.token);
    getMyInfo()
}
function getMyInfo() {
    getUserInfoApi({
        data: {
            current: 1,
            page_size: 10
        }
    }).then(res => {
        userStore.setUserInfo(res.data);
        if (res.data.invited_by_code === '' && res.data.agency_level == 1) {
            uni.navigateTo({
                url: '/pages-sub/login/addInviter'
            })
        } else {
            uni.switchTab({
                url: '/pages/home/index'
            })
        }
    })
}
// const toForget = () => {
//     uni.navigateTo({
//         url: '/pages/login/forgetPassword'
//     })
// }


// const toLogin = () => {
//     uni.redirectTo({
//         url: `/pages/login/codeLogin?phone=${form.phone}`
//     })
// }
function passWordClick() {
    uni.navigateTo({
        url: '/pages-sub/login/index'
    })
}
const leftClick = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>

<style lang="scss" scoped>
.login_content {
    width: 100%;
    height: 100vh;

    .login_content_box {
        width: 100%;
        box-sizing: border-box;
        padding: 62rpx 32rpx 0 32rpx;
        background: #FFFFFF;

        .login_content_box_title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 48rpx;
            color: #121212;
            font-style: normal;
            text-transform: none;
        }

        .input_box {
            box-sizing: border-box;
            padding: 48rpx 0 32rpx 0;
            display: flex;
            align-items: center;
            width: 100%;
            height: 124rpx;
            border-bottom: 2rpx solid #DFDFDF;

            .input_box_title {
                flex: 0 0 122rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #121212;
                font-style: normal;
                text-transform: none;
            }

            .input_box_line {
                width: 2rpx;
                height: 24rpx;
                background: #DFDFDF;
                margin-right: 24rpx;
            }
        }

        .login_content_button {
            box-sizing: border-box;
            padding: 0 72rpx;

            .login_content_to_password {
                display: flex;
                justify-content: space-between;
                width: 100%;
                padding-top: 48rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #999999;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }

        .login_content_to_agreement {
            display: flex;
            align-items: center;
            padding-top: 48rpx;
            padding-bottom: 128rpx;

            .uv-checkbox-group {
                flex: none;
            }

            .login_content_to_agreement_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #777777;
                font-style: normal;
                text-transform: none;
            }

            .login_content_to_agreement_text_color {
                color: #FF7D1C;
            }
        }
    }

    ::v-deep .uv-checkbox-group {
        flex: none !important;
    }

    .passwordLogin {
        text-align: center;
        font-size: 23rpx;
        margin-top: 30rpx;
    }
}
</style>